<template>
  <div id="app">
    <div id="header">
      <div id="header-content">
        <div id="logo">
          <img src="./assets/gqlogo.png" alt />
        </div>
      </div>
      <div id="menu">
        <ul id="nav" ref="nav">
          <router-link to="/" tag="li" class="on" v-show="nav.length>0">
            <a
              :class="[active=='首页'||activeNav=='首页'?'active':'']"
              @mouseenter="active='首页'"
              @mouseleave="active=''"
              @click="activeNav='首页'"
            >首页</a>
          </router-link>
          <li class="on" v-for="itemF in nav" :key="itemF.id">
            <a
              :class="[active==itemF.item.name||activeNav==itemF.item.name?'active':'']"
              @mouseenter="active=itemF.item.name"
              @mouseleave="active=''"
              @click="goMenu(itemF.item.id,itemF.childrens.name,itemF)"
            >{{itemF.item.name}}</a>
            <ul class="ul-sun" @mouseenter="active=itemF.item.name" @mouseleave="active=''">
              <li @click="goSunMenu(itemF.item.id,son)" v-for="son in itemF.childrens" :key="son.id">
                <a>{{son.name}}</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>

    <router-view />

    <div id="footer">
      <div class="foot-content">
        <div class="copy">
          <span>
            版权所有：
            <font class="foot-info">广东青年职业学院</font>
            <br />建议在IE8以上浏览器
            1024*768以上分辨率下浏览本站
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNav:'首页',
      active: "",
      nav: []
    };
  },
  mounted() {
    this.getNavData();
  },
  watch:{
    "$route.path":function(){
      let id = this.$route.path.slice(-1);
      this.nav.forEach(v=>{
        if(v.item.id==id){
          this.activeNav = v.item.name
        }
      })
    }
  },
  methods: {
    goMenu(id,name,itemF) {
      // this.$router.push({
      //   name: "About",
      //   params: {
      //     id
      //   }
      // });
      console.log(itemF)
        let listId = itemF.childrens.length>0?itemF.childrens[0].id:''
      this.$router.push({
        path: "/about/"+id,
        query:{name,listId}
      });
    },
    goSunMenu(id,sunObj){
      this.$router.push({
        path: "/about/"+id,
        query:{
          listId:sunObj.id,
          name:sunObj.name
        }
      });
    },
    //获取导航
    getNavData() {
      this.$axios.post("/OpenApi/list").then(res => {
        console.log("导航栏", res);
        this.nav = res.data;
      });
    }
  }
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
* {
  margin: 0;
  padding: 0;
}
body {
  color: #333;
  background: url(./assets/body-bg.jpg);
  min-width: 1200px;
}
ul,
li {
  list-style-type: none;
}
a {
  color: #383838;
  text-decoration: none;
}
//清除浮动
.clearfloat:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}
.clearfloat {
  zoom: 1; //ie6
}
#header {
  width: 100%;
  height: 308px;
  position: relative;
  background: url(./assets/header-bg.jpg) no-repeat top center;
  #header-content {
    width: 1200px;
    height: 255px;
    position: relative;
    z-index: 99;
    margin: 0 auto;
    #logo {
      position: absolute;
      top: 15px;
      left: 0px;
      z-index: 99;
    }
  }
  #menu {
    width: 1200px;
    height: 53px;
    position: relative;
    z-index: 99999;
    margin: 0 auto;
    #nav {
      height: 53px;
      line-height: 53px;
      white-space: nowrap;
      margin: 0 auto;
      width: 890px;
      padding-left: 310px;
      display: flex;
      display: -webkit-flex;
      display: -moz-flex;
      // position: absolute;
      // right: 0;
      li {
        cursor: pointer;
        flex: 1;
        -webkit-flex: 1;
        -moz-flex: 1;
        float: left;
        height: 53px;
        text-decoration: none;
        font-size: 16px;
        color: #fff;
        text-align: center;
        position: relative;
        z-index: 990;
        padding-right: 2px;
        background: url(./assets/menu-li-bg.png) no-repeat right top;
        &:nth-last-child(1) {
          background: none;
        }
        .active {
          color: #fff;
          background: url(./assets/menu-hover.jpg) no-repeat 2px center;
        }
        a {
          width: 100%;
          text-align: center;
          display: block;
          color: #333;
          text-decoration: none;
          float: left;
          position: relative;
          z-index: 999;
          padding: 0 12px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          font-size: 14px;
          font-family: "微软雅黑";
          &:hover {
            color: #fff;
            background: url(./assets/menu-hover.jpg) no-repeat 2px center;
          }
          &:hover + ul {
            display: block;
          }
        }
      }

      .ul-sun {
        display: none;
        position: absolute;
        top: 53px;
        width: 120px;
        z-index: 99999;
        &:hover {
          display: block;
        }
        li {
          float: left;
          border-top: 1px solid #a76a48;
          height: 35px;
          background: #7e4527 !important;
          padding: 0px;
          a {
            float: left;
            display: block;
            text-align: left;
            text-decoration: none;
            width: 160px;
            font-weight: normal;
            padding: 2px 13px;
            line-height: 30px;
            font-size: 14px;
            background: none !important;
            color: #fff !important;
            &:hover {
              color: #fff !important;
              background: #a76a48 !important;
              height: 30px;
            }
          }
        }
      }
    }
  }
}

#footer {
  width: 100%;
  height: 105px;
  overflow: hidden;
  background: url(./assets/foot-bg.jpg) repeat-x;
  .foot-content {
    width: 1200px;
    height: 105px;
    line-height: 24px;
    margin: 0 auto;
    font-size: 12px;
    .copy {
      width: 580px;
      margin: 0 auto;
      height: 60px;
      background: url(./assets/foot-icon.png) no-repeat 18px 24px;
      padding: 28px 0 0 0;
      color: #8a6029;
      line-height: 2;
      .foot-info {
        color: #8a6029;
      }
    }
  }
}
</style>
